<template>
	<view class="content">
    <u-toast ref="uToast" />
	<u-swiper class="banner" :height="400" :list="swiperList" @click="toPageFromBanner"></u-swiper>
	<u-grid class="grids" :col="3" :border="false">
		<u-grid-item :custom-style="{padding: '0'}" @click="toPage('pages/serviceList/serviceList', 1)">
			<image class="grid-img" src="../../static/img/pension-nurse.png">
			<view class="grid-text">护工服务</view>
		</u-grid-item>
		<!-- <u-grid-item :custom-style="{padding: '0'}" @click="toPage('pages/insurance/insurance')">
			<image class="grid-img" src="../../static/img/pension-insurance.png">
			<view class="grid-text">长护险</view>
		</u-grid-item> -->
		<u-grid-item :custom-style="{padding: '0'}" @click="toPage('pages/serviceList/serviceList', 2)">
			<image class="grid-img" src="../../static/img/pension-housekeeping.png">
			<view class="grid-text">家政服务</view>
		</u-grid-item>
		<u-grid-item  :custom-style="{padding: '0'}" @click="noPage">
			<image class="grid-img" src="../../static/img/pension-doctor.png">
			<view class="grid-text">就医陪同</view>
		</u-grid-item>
		<u-grid-item  :custom-style="{padding: '0'}" @click="toPage('pages/entertainmentList/entertainmentList')">
			<image class="grid-img" src="../../static/img/pension-entertainment.png">
			<view class="grid-text">文娱服务</view>
		</u-grid-item>
		<u-grid-item  :custom-style="{padding: '0'}" @click="noPage">
			<image class="grid-img" src="../../static/img/pension-organization.png">
			<view class="grid-text">机构养老</view>
		</u-grid-item>
	</u-grid>
	<!-- <u-tabs style="width: 100%" :list="list" :is-scroll="false" :current="current" :duration="0.2" @change="change"></u-tabs> -->
	<!-- <image @click="noPage" class="bar" src='../../static/img/bar.png'/> -->
	<view class="news-container">
		<!-- <view class="news-item" @click="toArticleList(14)">
			<view class="text">每日快讯</view>
			<image class="news-item-1" src='https://ftp.bmp.ovh/imgs/2021/04/2487f46af760cbbd.png'/>
		</view> -->
		<view class="news-item" :style="{'background-image': `url(${'https://bizser.njtrh.com:9954/images/biztd/20211209/20211209005715669.jpg'})`}" @click="toArticleList(15)">
			<view class="text">营养调理</view>
		</view>
		<view class="news-item" :style="{'background-image': `url(${'https://bizser.njtrh.com:9954/images/biztd/20211209/20211209005756417.jpg'})`}" @click="toArticleList(16)">
			<view class="text">健康护理</view>
		</view>
		<view class="news-item" :style="{'background-image': `url(${'https://bizser.njtrh.com:9954/images/biztd/20211209/20211209005544148.jpg'})`}" @click="toArticleList(17)">
			<view class="text">科学养生</view>
		</view>
	</view>
	</view>
</template>

<script>
import Vue from "vue";
import { getArticleListAPI } from "../../api/arc";
import { Articles } from '../../api/config/enums'

export default Vue.extend({
  data() {
    return {
      $u: {
        route: Object,
      },
      current: 0,
      bannerList: [],
      swiperList: [
        // {
        // 	image: 'https://ftp.bmp.ovh/imgs/2021/04/3300e567d4949563.png'
        // }, {
        // 	image: 'https://ftp.bmp.ovh/imgs/2021/04/3300e567d4949563.png'
        // }, {
        // 	image: 'https://ftp.bmp.ovh/imgs/2021/04/3300e567d4949563.png'
        // }
      ],
    };
  },
  onLoad() {
    getArticleListAPI({
      itemId: Articles.homeBanner
    }).then((res) => {
      console.log(res.articlesList);
      this.bannerList = res.articlesList;
      this.swiperList = res.articlesList.map((item, index) => {
        return {
          image: item.cover,
          title: `【${item.title}】${item.guide}`,
        };
      });
    });
  },
  methods: {
    change(index) {
      this.current = index;
    },
    toPage(url, type) {
      // type: 1护工服务 2家政服务
      if (type) {
        this.$u.route(url, { type });
      } else {
        this.$u.route(url);
      }
    },
    noPage() {
      this.$refs.uToast.show({
        title: "敬请期待",
        type: "default",
      });
    },
    toArticle(id) {
      this.$u.route("pages/article/article", {
        articleId: id,
      });
    },
    toArticleFromBanner(index) {
      // this.toArticle(this.bannerList[index].articleId)
    },
    toArticleList(itemId) {
      this.$u.route("pages/articleList/articleList", {
        itemId,
      });
    },
  },
});
</script>

<style lang="scss" scoped>
.banner {
  width: 100%;
}
.content {
  display: flex;
  overflow-x: hidden;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin: 200rpx auto 50rpx auto;
}

.text-area {
  display: flex;
  justify-content: center;
}

.test {
  width: 200px;
  overflow-wrap: break-word;
}
.title {
  font-size: 36rpx;
  color: #8f8f94;
}
.u-card-wrap {
  padding: 1px;
}

.u-body-item {
  font-size: 32rpx;
  color: #333;
  padding: 20rpx 10rpx;
}

.u-body-item image {
  width: 120rpx;
  flex: 0 0 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  margin-left: 12rpx;
}
.grids {
  padding: 25rpx 0;
  .grid-img {
    width: 120rpx;
    height: 120rpx;
  }
}
.grid-text {
  line-height: 60rpx;
}
.news-container {
  width: 100%;
  display: flex;
  // flex-wrap: wrap;
  padding: 0 20rpx;
  margin-bottom: 20rpx;
  flex-direction: column;
  .news-item {
    width: 100%;
    flex: auto;
    background-color: #ccc;
    margin: 8rpx;
    border-radius: 40rpx;
    height: 30vw;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    .text {
      position: absolute;
      width: 100%;
      font-size: 40rpx;
      line-height: 30vw;
      color: #fff;
      text-align: center;
      font-weight: bold;
    }
  }
}
.bar {
  width: 96vw;
  height: 12.5vw;
  margin-bottom: 20rpx;
}
</style>
